<template>
  <div id="add-cate">
    <template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="field" label="字段" width="200"></el-table-column>
        <el-table-column prop="comment" label="备注" width="200"></el-table-column>
        <el-table-column prop="value" label="值">
          <template slot-scope="scope">
            <el-input v-if="scope.row.field === 'level' || scope.row.field === 'parent_id'"
              :disabled="true" type="text" v-model="scope.row.value"></el-input>
            <el-switch v-else-if="scope.row.field === 'status'" v-model="scope.row.value"
              on-text="开" off-text="关"></el-switch>
            <el-slider v-else-if="scope.row.field === 'order'" v-model="scope.row.value"
              :min="0" :max="200" show-input></el-slider>
            <template v-else-if="scope.row.field === 'ver'">
              <el-radio-group v-model="scope.row.value" class="redio-group">
                <el-radio-button v-for="(ver, key) in arrowVer" :label="ver + '[' + key + ']'" :key="key"></el-radio-button>
              </el-radio-group>
            </template>
            <el-button @click="submitCreate" v-else-if="scope.row.field === ''" type="primary">提交</el-button>
            <el-input v-else type="text" v-model="scope.row.value"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
  import {baseUrl, arrowVerUrl, createApiCateUrl} from '../assets/js/setting.js'
  import qs from 'qs'
  export default{
    data: () => {
      return {
        baseUrl: baseUrl,
        arrowVerUrl: arrowVerUrl,
        createApiCateUrl: createApiCateUrl,
        arrowVer: [],
        tableData: [
          {field: 'name', comment: '类名(中文)', value: ''},
          {field: 'glyphicons', comment: '图标(bootStrap)', value: ''},
          {field: 'parent_id', comment: '父ID', value: '0'},
          {field: 'level', comment: '等级', value: '1'},
          {field: 'action', comment: '动作标志(英文)', value: ''},
          {field: 'ver', comment: '版本', value: ''},
          {field: 'status', comment: '状态', value: true},
          {field: 'order', comment: '排序(大往后)', value: 100},
          {field: ''}
        ]
      }
    },
    watch: {
      '$route': 'setVal'
    },
    created () {
      this.setVal()
      this.getArrowVer()
    },
    methods: {
      // 当单选按钮改变时
      changeRadio (data) {
        console.log('change...', data)
      },
      setVal () {
        let level = this.$route.params.level ? parseInt(this.$route.params.level, 10) : -1
        let id = this.$route.params.id ? parseInt(this.$route.params.id, 10) : -1
        if (level !== -1 && id !== -1) {
          if (level === 1) {
            this.tableData[2].value = 0
            this.tableData[3].value = 1
          } else if (level === 2) {
            this.tableData[2].value = id
            this.tableData[3].value = 2
          } else {
            this.$message('不存在的等级' + level + ' id:' + id)
          }
        }
      },
      // 获取允许的版本
      getArrowVer () {
        let loading = this.$loading({fullscreen: true, text: '正在载入数据...'})
        this.$http(this.baseUrl + this.arrowVerUrl)
        .then((response) => {
          loading.close()
          if (response.status === 200) {
            if (response.data.status === 1) {
              this.arrowVer = response.data.res
            } else {
              this.$message(response.data.msg)
            }
          } else {
            this.$message('错误码:' + response.status + '--' + response.statusText)
          }
        })
        .catch((error) => {
          loading.close()
          console.log(error)
        })
      },
      // 创建分类
      submitCreate () {
        let sendData = {}
        for (let i = 0; i < this.tableData.length - 1; i++) {
          if (this.tableData[i].value === '' && this.tableData[i].level !== '2' && this.tableData[i].field !== 'glyphicons') {
            this.$message('字段' + this.tableData[i].field + '请输入')
            return
          }
          if (this.tableData[i].field === 'ver') {
            let reg = /\[(\S+)\]/
            let find = reg.exec(this.tableData[i].value)
            sendData[this.tableData[i].field] = find[1]
          } else {
            sendData[this.tableData[i].field] = this.tableData[i].value
          }
        }
        let loading = this.$loading({fullscreen: true, text: '正在创建分类...'})
        this.$http.post((this.baseUrl + this.createApiCateUrl), qs.stringify(sendData))
        .then((response) => {
          loading.close()
          if (response.status === 200) {
            if (response.data.status === 1) {
              this.$message({
                message: response.data.msg,
                type: 'success'
              })
              this.$router.push({name: 'Doc', path: '/doc'})
              // this.getCate()
            } else {
              this.$message({
                message: response.data.msg,
                type: 'warning'
              })
            }
          } else {
            this.$message({
              message: '网络错误:' + response.data.status,
              type: 'error'
            })
          }
        })
        .catch((error) => {
          loading.close()
          console.log('error:::', error)
          if (error) {
            this.$message({
              message: '错误:' + JSON.stringify(error),
              type: 'error'
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  #add-cate{
    margin-top: 60px;
  }
</style>
